<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
    <title>Sport A Ecommerce Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Sport Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        } </script>
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <!--//fonts-->
    <link rel="stylesheet" href="css/etalage.css">


</head>
<body>
<div id="singleapp">
    <!--header-->
    <div class="line">

    </div>
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="header-top">
            <div class="header-grid">
                <ul class="header-in">
                    <li><a href="account.html">我的账户 </a></li>
                    <li>
                        <select class="in-drop">
                            <option value="Yuan" class="in-of">人民币</option>
                            <option value="Dollars" class="in-of">美元</option>
                            <option value="Euro" class="in-of">欧元</option>
                        </select>
                    </li>
                </ul>
                <div class="search-box">
                    <!--                    <div id="sb-search" class="sb-sea rch" :class="{sb-search-open:isSearch==false , :isSearch==true}">-->
                    <div id="sb-search" class="sb-search" :class="{ 'sb-search-open': isSearch }">
                        <form>
                            <input class="sb-search-input" placeholder="输入您的搜索词..." type="search" name="search"
                                   id="search">
                            <input class="sb-search-submit" type="button" value="" @click="isSearch=!isSearch">
                            <!--                                <input class="sb-search-submit" type="submit" value="">-->
                            <span class="sb-icon-search"> </span>
                        </form>
                    </div>
                </div>
                <div class="online">
                    <a href="single.html">网上购物</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="header-bottom">
                <div class="h_menu4"><!-- start h_menu4 -->
                    <a class="toggleMenu" href="#">Menu</a>
                    <ul class="nav">
                        <li class="active" v-for="(item,index) in sstyle" :key="index"
                            @click="findStyleShoes(item.styleid)"><a
                                :href="'product.html#'+item.styleid">{{item.style}}</a></li>
                        <li><a href="product.html">更多 <i> </i></a>
                            <ul>
                                <li><a href="cart.html">购物车</a></li>
                                <li><a href="account.html">账户</a></li>
                                <li><a href="register.html">注册</a></li>
                            </ul>
                        </li>
                    </ul>

                </div><!-- end h_menu4 -->
                <ul class="header-bottom-in">
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">活跃起来</option>
                            <option value="Euro" class="in-of">活跃起来1</option>
                            <option value="Dollars" class="in-of">活跃起来2</option>
                        </select>
                    </li>
                    <li>
                        <select class="drop">
                            <option value="Yuan" class="in-of">社区</option>
                            <option value="Euro" class="in-of">社区1</option>
                            <option value="Dollars" class="in-of">社区2</option>
                        </select>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!---->
    <div class="container">
        <div class="single">
            <div class="col-md-9 top-in-single">
                <div class="col-md-5 single-top">
                    <ul id="etalage">
                        <li v-for="(item,index) in shoes" :key="index">
                            <a :href="'optionallink#'+index+'.html'">
                                <img class="etalage_thumb_image img-responsive" :src="item.photourl" alt="">
                                <img class="etalage_source_image img-responsive" :src="item.photourl" alt="">
                            </a>
                        </li>
                    </ul>

                </div>
                <div class="col-md-7 single-top-in">
                    <div class="single-para">
                        <h4 v-cloak v-if="shoes">{{shoes[0].sdescription}}</h4>
                        <div class="star">
                            <button @click="clickPraise()" :class="{ 'liked': liked }">
<!--                                <span v-if="liked" >❤️ Liked</span>-->
<!--                                <span v-else> 🤍 Like</span>-->
                                <span id="likedstatus_1" style="display: none">❤️ Liked</span>
                                <span id="likedstatus_2" style="display: block"> 🤍 Like</span>
                            </button>
                            <span id="likes_num"></span>
                          <!--  <ul>
                                <li><i> </i></li>
                                <li><i> </i></li>
                                <li><i> </i></li>
                                <li><i> </i></li>
                                <li><i> </i></li>
                            </ul>-->

                            <!--								评论-->
                            <div class="review">
                                <a href="#"> 3 reviews </a>/
                                <a href="#"> Write a review</a>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <label class="add-to" v-cloak>${{shoes[0].sprice}}</label>

                        <div class="available">
                            <h6>可选选项:</h6>
                            <ul>

                                <li>大小:
                                    <select>
                                        <option v-for="(item,index) in shoes">{{item.ssize}}</option>
                                        <option>39.0</option>
                                        <option>40.0</option>
                                        <option>41.0</option>
                                        <option>41.5</option>
                                        <option>42.0</option>
                                        <option>42.5</option>
                                        <option>43.0</option>
                                    </select>
                                </li>
                                <li>颜色:
                                    <select>
                                        <option>樱花粉</option>
                                        <option>绿蓝</option>
                                        <option>黑白</option>
                                        <option>灰蓝</option>
                                        <option>黑粉</option>
                                        <option>白</option>
                                    </select>
                                </li>

                            </ul>
                        </div>
                        <a href="#" class="cart" @click.prevent="addCart(sid,1)">加入购物车</a>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="product-top">
                    <div class="col-md-4 grid-product-in">
                        <div class=" product-grid">
                            <a href="single.html"><img class="img-responsive " src="images/sh2.png" alt=""></a>
                            <div class="shoe-in">
                                <h6><a href="single.html">Lorem Ipsum is simply</a></h6>
                                <label>$67.99</label>
                                <a href="single.html" class="store">FIND A STORE</a>
                            </div>

                            <b class="plus-on">+</b>
                        </div>
                    </div>
                    <div class="col-md-4 grid-product-in">
                        <div class=" product-grid">
                            <a href="single.html"><img class="img-responsive " src="images/pr1.png" alt=""></a>
                            <div class="shoe-in">
                                <h6><a href="single.html">Lorem Ipsum is simply</a></h6>
                                <label>$67.99</label>
                                <a href="single.html" class="store">FIND A STORE</a>
                            </div>

                            <b class="plus-on">+</b>
                        </div>
                    </div>
                    <div class="col-md-4 grid-product-in">
                        <div class=" product-grid">
                            <a href="single.html"><img class="img-responsive " src="images/pr.png" alt=""></a>
                            <div class="shoe-in">
                                <h6><a href="single.html">Lorem Ipsum is simply </a></h6>
                                <label>$67.99</label>
                                <a href="single.html" class="store">FIND A STORE</a>
                            </div>

                            <b class="plus-on">+</b>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="single-bottom">
                    <h4>Brands</h4>
                    <ul>
                        <li>
                            <input type="checkbox" id="brand" value="">
                            <label for="brand"><span></span> Contrary belief</label>
                        </li>
                        <li>
                            <input type="checkbox" id="brand1" value="">
                            <label for="brand1"><span></span> Lorem Ipsum</label>
                        </li>
                        <li>
                            <input type="checkbox" id="brand2" value="">
                            <label for="brand2"><span></span> Fusce feugiat</label>
                        </li>
                        <li>
                            <input type="checkbox" id="brand3" value="">
                            <label for="brand3"><span></span> Contrary belief</label>
                        </li>
                        <li>
                            <input type="checkbox" id="brand4" value="">
                            <label for="brand4"><span></span>Injected humour</label>
                        </li>
                    </ul>
                </div>
                <div class="single-bottom">
                    <h4>Colors</h4>
                    <ul>
                        <li>
                            <input type="checkbox" id="color" value="">
                            <label for="color"><span></span> Red</label>
                        </li>
                        <li>
                            <input type="checkbox" id="color1" value="">
                            <label for="color1"><span></span> Blue</label>
                        </li>
                        <li>
                            <input type="checkbox" id="color2" value="">
                            <label for="color2"><span></span> Black</label>
                        </li>
                        <li>
                            <input type="checkbox" id="color3" value="">
                            <label for="color3"><span></span> White</label>
                        </li>
                        <li>
                            <input type="checkbox" id="color4" value="">
                            <label for="color4"><span></span>Green</label>
                        </li>
                    </ul>
                </div>
                <div class="single-bottom">
                    <h4>Product Categories</h4>
                    <div class="product-go">
                        <img class="img-responsive fashion" src="images/sh.png" alt="">
                        <div class="grid-product">
                            <a href="#" class="elit">Consectetuer adipiscing elit</a>
                            <span class=" price-in"><small>$500.00</small> $400.00</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="product-go">
                        <img class="img-responsive fashion" src="images/sh1.png" alt="">
                        <div class="grid-product">
                            <a href="#" class="elit">Consectetuer adipiscing elit</a>
                            <span class=" price-in"><small>$500.00</small> $400.00</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="product-go">
                        <img class="img-responsive fashion" src="images/sh2.png" alt="">
                        <div class="grid-product">
                            <a href="#" class="elit">Consectetuer adipiscing elit</a>
                            <span class=" price-in"><small>$500.00</small> $400.00</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

    <!---->
    <!--footer-->
    <div class="footer">
        <div class="col-md-3 footer-left">
            <h4>体育</h4>
            <div class="run-top">
                <ul class="run-grid">
                    <li><a href="#">运动</a></li>
                    <li><a href="#">循环</a></li>
                    <li><a href="#">铁人三项</a></li>
                    <li><a href="#">健康</a></li>
                    <li><a href="#">网球</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">风格</a></li>
                    <li><a href="#">特殊</a></li>
                    <li><a href="#">品牌活动</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 footer-left left-footer">
            <h4>最近的</h4>
            <div class="run-top top-run">
                <ul class="run-grid">
                    <li><a href="#">新闻 & 活动</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">视频</a></li>
                    <li><a href="#">购物</a></li>
                    <li><a href="#">赞助</a></li>
                    <li><a href="#">更多运动</a></li>
                </ul>
                <ul class="run-grid">
                    <li><a href="#">俱乐部 & 培训 </a></li>
                    <li><a href="#">活动地图</a></li>
                    <li><a href="#">挑战世界</a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-2 footer-left left-footer">
            <h4>您的账户</h4>
            <ul class="run-grid-in">
                <li><a href="account.html">登录</a></li>
                <li><a href="#">我的运动</a></li>
                <li><a href="#">我的活动</a></li>
            </ul>
        </div>
        <div class="col-md-4 footer-left left-footer">
            <ul class="social-in">
                <li><a href="#"><i> </i></a></li>
                <li><a href="#"><i class="youtube"> </i></a></li>
                <li><a href="#"><i class="facebook"> </i></a></li>
                <li><a href="#"><i class="twitter"> </i></a></li>
            </ul>
            <div class="letter">
                <h5>通讯</h5>
                <span>在下一篇文章中</span>
                <h6>NRL：本周末我们学到的五件事</h6>
                <p>支持郊区游戏;勇士撕裂</p>
                <a href="register.html" class="sign">注册并获取更多</a>
                <p class="footer-class"> © 2015 Sport 版权所有 |<a href="http://w3layouts.com/" target="_blank">W3layouts</a>的模板
                </p>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/jquery.etalage.min.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#singleapp",

        //model数据
        data() {
            return {
                //注册与登录数据
                username: 'joker',
                pwd: 'a',
                valcode: '',	//验证码

                isSearch: false,     //搜索框显示状态
                isLogin: false,		//记录当前登录状态
                sid: 0,
                shoes: [
                    {sdescription: '', sprice: '', sid: 0}
                ],		//商品数组
                sstyle: [],	//商品类型sid

                liked: false,		//是否点赞
                likes: 0,	//商品的总点赞数量

                // 初始状态，内容隐藏
                isVisible:false,
            }
        },
        methods: {
            //保持点赞状态
            praiseStatus:function (){
                // 获取片段标识符部分，即 '#item.sid'
                var fragment = window.location.hash;
                // 去除 '#' 符号
                var sid = fragment.substring(1); // 去除 '#' 符号
                var params = new URLSearchParams();
                params.append("sid", sid);
                axios.post("praise.action?op=praiseStatus", params).then(result => {
                    var jm = result.data;
                    if (jm.code == 1) {
                        // this.liked= jm.obj.liked;
                        // this.likes=jm.obj.likes;
                        if (jm.obj.liked==true){
                            this.isVisible=true;
                            document.getElementById("likedstatus_1").style.display='block';
                            document.getElementById("likedstatus_2").style.display='none';
                        }else {
                            document.getElementById("likedstatus_1").style.display='none';
                            document.getElementById("likedstatus_2").style.display='block';
                        }
                        document.getElementById("likes_num").innerText=jm.obj.likes;
                    }
                })
            },
            //点赞   fid:代操作的  菜品编号   index是界面上的data数组中元素的下标
            clickPraise: function () {
                let _this = this;
                // 获取片段标识符部分，即 '#item.sid'
                var fragment = window.location.hash;
                // 去除 '#' 符号
                var sid = fragment.substring(1); // 去除 '#' 符号
                var params = new URLSearchParams();
                params.append("sid", sid);
                axios.post("praise.action?op=clickPraise", params).then(result => {
                    var jm = result.data;
                    if (jm.code == 1) {
                        // this.liked= jm.obj.liked;
                        // this.likes=jm.obj.likes;
                        this.isVisible=! this.isVisible;
                        if (this.isVisible){
                            document.getElementById("likedstatus_1").style.display='block';
                            document.getElementById("likedstatus_2").style.display='none';
                        }else {
                            document.getElementById("likedstatus_1").style.display='none';
                            document.getElementById("likedstatus_2").style.display='block';
                        }
                        document.getElementById("likes_num").innerText=jm.obj.likes;
                    }
                })
            },
            //数据埋点：浏览记录
            traceBrowseFood: function(){
                // 获取片段标识符部分，即 '#item.sid'
                var fragment = window.location.hash;
                // 去除 '#' 符号
                var sid = fragment.substring(1); // 去除 '#' 符号
                axios.post("historical.action?op=traceBrowseFood&sid=" + sid).then(result => {
                    var jm = result.data;
                    if (jm.code == 1) {
                    }
                });
            },
            //加入购物车，没有购物车页面，后端没写
            addCart: function (sid, num) {
                console.log(sid);
                //发出请求
                var params = new URLSearchParams();
                params.append("sid", sid);
                params.append("num", num);
                //post()返回值  Promise                   result是响应的结果(headers,data)
                axios.post('order.action?op=order', params).then(result => {
                    let jm = result.data;
                    if (jm.code == 1) {
                        //TODO:显示购物车
                        alert("添加购物车成功....");
                    } else if (jm.code == 0) {
                        alert("添加购物车失败....");
                    } else {
                        alert("请登录....")
                    }
                });
            },
            //登录状态
            checkLogin: function () {
                return axios.get("user.action?op=checkLogin");
            },
            //初始化商品详情信息
            findShoesInfo: function () {
                var params = new URLSearchParams();
                // 获取片段标识符部分，即 '#item.sid'
                var fragment = window.location.hash;
                // 去除 '#' 符号
                var sid = fragment.substring(1); // 去除 '#' 符号
                // console.log("Received sid value:", sid);
                params.append("sid", sid);
                return axios.post("shoes.action?op=findShoesInfo", params);
            },
            //显示商品分类栏
            findStyle: function () {
                return axios.get("shoes.action?op=findStyle");
            },
            //点击分查询
            findStyleShoes: function (styleid) {
                var params = new URLSearchParams();
                // 获取片段标识符部分，即 '#item.sid'
                // var fragment = window.location.hash;
                // // 去除 '#' 符号
                // var styleid = fragment.substring(1); // 去除 '#' 符号
                // console.log("Received sid value:", sid);
                params.append("styleid", styleid);
                axios.post("shoes.action?op=findStyleShoes", params).then(result => {
                    vm.$data.shoes = result.data.obj;
                });
            },
        },
        mounted: function () {
            const _this = this;
            axios.all([this.checkLogin(), this.findShoesInfo(), this.findStyle()]).then(
                axios.spread((d1, d2, d3) => {
                    if (d1.data.code == 1) {
                        //vm.$data.指的是model中的数据
                        //this.username:这是view-model中的数据
                        vm.$data.username = d1.data.obj.username;
                        vm.$data.isLogin = true;
                    }
                    if (d2.data.code == 1) {
                        vm.$data.shoes = d2.data.obj;
                        _this.sid = d2.data.obj[0].sid;
                    }
                    if (d3.data.code == 1) {
                        vm.$data.sstyle = d3.data.obj;
                    }

                    this.findStyleShoes(this.sstyle.styleid);
                    this.traceBrowseFood();
                    this.praiseStatus();
                })
            );
        },
    });



    setTimeout(function () {
        $('#etalage').etalage({
            thumb_image_width: 300,
            thumb_image_height: 400,
            source_image_width: 900,
            source_image_height: 1200,
            show_hint: true,
            click_callback: function (image_anchor, instance_id) {
                alert('Callback example:\nYou clicked on an image with the anchor: "' + image_anchor + '"\n(in Etalage instance: "' + instance_id + '")');
            }
        });
    }, 100);
</script>
</body>
</html>